<template>
	<view>
		<!-- 组件page-head导入使用 在main.js中注册组件 -->
		<page-head :title="title"></page-head>
		<p class="title">{{title}}</p>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="button-sp-area">
				<button type="primary" plain="true" @click="getAPoem">点我获取今日诗词</button>
				<button type="primary" :loading="loading" @click="getAPoem">Get a Poem Loading</button>

				<!-- <button type="primary" disabled="true" plain="true">不可点击的按钮</button> -->
				<!-- <button type="default" plain="true">按钮</button> -->
				<!-- <button type="default" disabled="true" plain="true">按钮</button> -->
				<!-- <button class="mini-btn" type="primary" size="mini">按钮</button> -->
				<!-- <button class="mini-btn" type="default" size="mini">按钮</button> -->
				<!-- <button class="mini-btn" type="warn" size="mini">按钮</button> -->
			</view>
			<!-- 只有H5和APP才会生效的代码段 -->
			<!-- #ifdef H5 || APP-PLUS -->
			<button type="primary" @click="feedbackHandle">意见反馈,讲述你的意见</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		osPlatform,
		osType,
		getOsType,
		getOsPlatform
	} from '../../common/util.js'
	export default {
		data() {
			return {
				title: '今日诗词',
				loading: true
			}
		},
		mounted() {
			console.log('...mounted...poem.vue...')
		},
		onLoad(option) {
			console.log('...onLoad...poem.vue...')
			// 在前一个页面 配置路径 url: '../poem/poem?id=1&name=uniapp', 这样传参数据的话 下面传参option就能获取
			console.log(option) // {"id":"1","name":"uniapp"} 
			// 在前一个页面 配置路径 url: '../poem/poem', 也就是去掉?后面的,这样传参数据的话 下面传参option就是空{}
			// console.log(option) // {}
			// console.log(option.id) 
			// console.log(option.name)

			const eventChannel = this.getOpenerEventChannel()
			eventChannel.emit('acceptDataFromOpenedPage', {
				data: '是acceptDataFromOpenedPage这个优美的诗词'
			});
			eventChannel.emit('someEvent', {
				data: '是someEvent这个优美的诗词'
			});
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				// console.log(data)
				console.log('...目标页面...', JSON.stringify(data))
			})
		},
		methods: {
			getAPoem() {
				console.log('Get a Poem...')
				// httpbin接口
				// let httpbin_url = 'http://httpbin.org/get'
				// 今日诗词接口url
				// ------------------------------------------------------------------------------
				// 解决跨域问题 跨源资源共享 (CORS) 在mainfest.json中 配置 h5 具体去看mainfest.json.
				// 如果mainfest.json中 配置【 "target": "https://v2.jinrishici.coms",】,故意写错加个s
				// 则会报错为【Proxy error: Could not proxy request /one.json from 192.168.0.10:8080 to https://v2.jinrishici.coms (ENOTFOUND).】
				let jinrishici_url = 'https://v2.jinrishici.com/one.json'
				// 在h5中 外部浏览器 访问 使用下面url 此url的ip为本地ip
				let jinrishici_url_cors = 'http://192.168.0.10:8080/one.json'
				uni.request({
					url: jinrishici_url,
					method: 'GET',
					data: {
						text: 'demo_data'
					},
					header: {
						'X-User-Token': '7yzsEYo2vZ3zwBG+yfTtWtblmvFbz7QD' // 获取 Token 的地址为【https://v2.jinrishici.com/token】,GET方法,Token 用于鉴别和区分每个用户，获取后 永久有效。
					},
					success(res) {
						// console.log(res.data) // 这个本身就是对象了
						console.log('Get a Poem...success data -> ', JSON.stringify(res.data))
						// console.log('data content -> ', res.data.data.content)
						let getAPoemFromApi = res.data.data.content
						console.log(`Get a Poem...今日诗词:`, getAPoemFromApi)
						uni.showToast({
							title: getAPoemFromApi,
							duration: 5000,
							icon: 'none',
							position: 'center',
							success() {
								console.log('showToast...success...今日诗词:', getAPoemFromApi)
							}
						});
					},
					fail(err) {
						console.log('Get a Poem...err', err)
					},
					complete() {
						console.log('Get a Poem...complete')
					}
				})
			},
			feedbackHandle() {
				console.log('收到你的反馈意见了...')
				console.log('你的操作系统类型是:-> ', osType)
				console.log('你的操作系统类型2是:-> ', getOsType())
				console.log('你的操作系统平台是:-> ', osPlatform)
				console.log('你的操作系统平台2是:-> ', getOsPlatform())
				// 获取所有的方法集合
				// console.log(this.$options.methods)
			}
		},
	}
</script>

<style>
	button {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.button-sp-area {
		margin: 0 auto;
		width: 60%;
	}

	.mini-btn {
		margin-right: 10rpx;
	}

	.title {
		color: #333333;
		font-size: calc();
		text-align: center;
	}
</style>
